<template>
  <div class="article">
    <van-nav-bar left-arrow @click-left="$router.push('/')">
      <!-- 导航栏标题 -->
      <template #title>
        <div class="nav-author" v-show="showTitle">
          <van-image round width="7vw" height="7vw" :src="article.aut_photo" />
          <span class="name">{{ article.aut_name }}</span>
          <span class="line">|</span>
          <span
            class="follow"
            v-if="!article.is_followed"
            @click="userFollowing(true)"
          >
            关注
          </span>
          <span class="follow un" v-else @click="userFollowing(false)">
            已关注
          </span>
        </div>
      </template>
      <template #right>
        <van-icon name="ellipsis" size="5.4vw" />
      </template>
    </van-nav-bar>
    <!-- 文章主体 -->
    <van-skeleton title :row="30" :loading="loading">
      <div class="article-wrapper" ref="wrapper" @scroll="wrapperScroll">
        <!-- 头部：标题 时间 作者 -->
        <div class="header" ref="header">
          <h3 class="title">{{ article.title }}</h3>
          <div class="time">
            <span>{{ article.pubdate }}</span>
            <span>|</span>
            <span>{{ article.read_count }} 阅读</span>
            <span>|</span>
            <span>{{ article.comm_count }} 评论</span>
          </div>
          <div class="author van-hairline--bottom">
            <van-image
              round
              width="10vw"
              height="10vw"
              :src="article.aut_photo"
            />
            <span class="name">{{ article.aut_name }}</span>
            <van-button
              round
              size="small"
              color="#FC6627"
              v-if="!article.is_followed"
              @click="userFollowing(true)"
            >
              + 关注
            </van-button>
            <van-button round size="small" v-else @click="userFollowing(false)">
              已关注
            </van-button>
          </div>
        </div>
        <!-- 内容：文章内容 -->
        <div class="main" ref="main">
          <div class="html" v-html="article.content" ref="content"></div>
          <div class="space"></div>
        </div>
        <!-- 评论：评论组件 -->
        <ArticleComment
          @commentScroll="commentScroll"
          :article="article"
        ></ArticleComment>
      </div>
    </van-skeleton>
  </div>
</template>

<script>
import { articlesGet, userFollowings } from '@/api/article.js'
import hljs from 'highlight.js'
import 'highlight.js/styles/vs2015.css'
import ArticleComment from './components/article-comment.vue'
import gsap from 'gsap'
export default {
  name: 'Article',
  components: {
    ArticleComment
  },
  data () {
    return {
      articleId: this.$route.params.articleId,
      article: {},
      showTitle: false,
      loading: true
    }
  },
  methods: {
    // 获取文章详情
    async getArticle () {
      const res = await articlesGet(this.articleId)
      this.article = res.data
      this.loading = false
      this.$nextTick(() => {
        this.$refs.content.querySelectorAll('pre').forEach(item => {
          hljs.highlightElement(item)
        })
      })
    },
    // 顶部头像与作者显示与隐藏
    wrapperScroll () {
      const _scrollTop = this.$refs.wrapper.scrollTop
      const _scrollHeight = this.$refs.header.scrollHeight
      this.showTitle = _scrollTop > _scrollHeight
    },
    // 关注和取消关注点击事件
    async userFollowing (bol) {
      await userFollowings(this.article.aut_id, bol)
      this.article.is_followed = bol
      this.$toast.success(bol ? '关注成功' : '取消关注成功')
    },
    // 评论框/评论按钮点击事件
    commentScroll ($event) {
      const _scrollTop = this.$refs.wrapper.scrollTop
      const _height =
        this.$refs.header.offsetHeight + this.$refs.main.offsetHeight
      if (_scrollTop >= _height && $event) {
        gsap.to(this.$refs.wrapper, {
          scrollTop: 0
        })
      } else {
        gsap.to(this.$refs.wrapper, {
          scrollTop: _height
        })
      }
    }
  },
  created () {
    this.getArticle()
  }
}
</script>

<style lang="less" scoped>
.article {
  ::v-deep .van-nav-bar__title {
    max-width: 270px;
    width: 270px;
  }

  .nav-author {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    > span {
      font-size: 14px;
      padding-left: 5px;
    }

    .line {
      color: #ccc;
      position: relative;
      top: -1px;
    }

    .follow {
      color: @geek-color;

      &.un {
        color: #999;
      }
    }
  }

  .article-wrapper {
    height: 100%;
    overflow-y: auto;
    padding: 4px 0 50px;

    .header {
      padding: 0 16px;

      .title {
        font-size: 20px;
        font-weight: normal;
        padding: 10px 0;
        margin: 0;
      }

      .time {
        font-size: 12px;
        color: #999;

        span:nth-child(2n) {
          margin: 0 5px;
          color: #ccc;
          position: relative;
          top: -1px;
        }
      }

      .author {
        display: flex;
        align-items: center;
        padding: 10px 0;

        .name {
          flex: 1;
          padding-left: 10px;
          font-size: 16px;
        }
      }
    }

    .main {
      .space {
        height: 16px;
        background: @geek-gray-color;
      }

      .html {
        word-break: break-all;
        width: 100%;
        overflow: hidden;
        padding: 20px 16px;

        ::v-deep img {
          max-width: 100%;
          background: #f9f9f9;
        }
        ::v-deep pre {
          white-space: pre-wrap;

          code {
            white-space: pre;
          }
        }
      }
    }
  }
}
</style>
